import React from 'react';
import axios from 'axios'
import { useState, useEffect, useMemo } from 'react';

// usememo定义:
// 该hook一般作为性能优化使用, 项目中可以不用,
// 语法: const 变量= usememo(()=>{return 值},[依赖的变量,...])
// 执行规则: 当依赖的变量变化, 则会触发执行函数参数1这个函数 ()=>{return 值},
// 而参数1中的函数的return 返回值就会说变量 const 变量 的值
// 该hooks 就是react 中的计算属性


//函数组件的执行规则
// 当函数组件中的定义的state 发生变化, 函数组件会重新调用执行
const Father = () => {
    // 定义关键字变量
    const [keyword, setkeyword] = useState('')
    const [list, setlist] = useState([]);
    const [count, setCount] = useState(0)
    // 请求数据列表
    useEffect(() => {
        axios.get('https://api.i-lynn.cn/college').then(res => {
            // console.log(res);
            setlist(res.data.data.list1)
        })
    }, [])

    // 定义筛选的方法
    // getfilterlist该计算属性中的参数1箭头函数,初始化执行1次,当依赖的值发生变化, 在执行
    // 所以当依赖的值只有keyword. 那么只执行初始化那一次
    // 当依赖的值为keyword, list的时候, 初始化执行1次, list 变化后再执行一次参数1函数,

    const getfilterlist = useMemo(() => {
        // console.log(list.filter(item => item.school_name.includes(keyword)));
        console.log('我筛选了');
        return list.filter(item => item.school_name.includes(keyword))
    }, [keyword, list])

    //console.log('getfilterlist', getfilterlist);
    return (
        <div>
            {/* 显示count */}
            <p onClick={() => {
                setCount(count + 1)
            }}>count:{count}</p>
            <hr />
            <p>
                {/* 函数组件实现受控组件 */}
                <input type='text' value={keyword} onChange={(e) => {
                    setkeyword(e.target.value)
                }} />
            </p>
            {/* 搜索的列表展示 */}
            <ul>
                {
                    getfilterlist.map(item => <li key={item.id}>{item.school_name}</li>)
                }
            </ul>

        </div>
    );
}

export default Father;
